<template>
    <div id="box">
        <h1>BMI值计算</h1>
        <el-input v-model="input_height" placeholder="请输入您的身高                 单位（cm）"></el-input>
        <br><br><br>
        <el-input v-model="input_weight" placeholder="请输入您的体重                 单位（kg）"></el-input>
        <br><br><br>
        <el-button type="primary" @click="sub">BMI计算</el-button>
        <p  v-model="bmi_str">您的bmi值为 <font style="color: red">{{bmi_num}}</font> </p>
        <p  v-model="bmi_num">您的身体状况为 <font style="color: red">{{bmi_str}}</font></p>

    </div>
</template>

<script>
    export default {
        name: "BMI",
        data:function(){
            return{
                input_weight: '',
                input_height: '',
                bmi_str:'',
                bmi_num:''
            }
        },
        methods:{
            sub:function(){
                var _this = this
                this.axios.get('/api/bmi/',{params:{'weight':this.input_weight,'height':this.input_height}}).then(function(response){
                    _this.bmi_str = response.data.bmi_str;
                    _this.bmi_num = response.data.bmi_num;
                    console.log(response.data)
                })
            }
        }
    }
</script>

<style scoped>
    #box{
        width: 1000px;
        margin: 100px auto;
    }
</style>